<template>
  <div class="h-full flex-col">
    <SearchForm @handle-reset="resetParams" @handle-search="getList">
      <el-form :model="searchForm" inline>
        <el-form-item label="시간선택">
          <MyCombinePiker :dateTimeRange="_dateTimeRange" @changeHandle="timePickChangeHandle" />
        </el-form-item>

        <el-form-item>
          <el-input v-model="searchForm.agent_player_id" placeholder="로얄회원번호" />
        </el-form-item>
      </el-form>
    </SearchForm>
    <div class="page-card h-full m-table-position" v-loading="loading">
      <div class="m-bet-amount-sum">
        <span>총 베팅금액:</span>
        <el-tag :type="betAmountSum > 0 ? 'danger' : 'success'">
          {{ formatNumber(betAmountSum) }}
        </el-tag>
      </div>

      <MyTable :tableData="tableData" :tableColumn="tableColumn" v-slot="sp">
        <el-table :data="tableData" :highlight-current-row="true">
          <el-table-column v-if="sp.ctc.includes('GUID')" label="GUID" prop="guid" align="center" />
          <el-table-column v-if="sp.ctc.includes('PP회원ID')" label="PP회원ID" prop="ext_player_id" align="center"
            width="300" />

          <el-table-column v-if="sp.ctc.includes('시작시간')" label="시작시간" align="center" width="200">
            <template #default="{ row }">
              {{ row.start_date }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('종료시간')" label="종료시간" align="center" width="200">
            <template #default="{ row }">
              {{ row.end_date }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('게임ID')" label="게임ID" prop="game_id" align="center" />

          <el-table-column v-if="sp.ctc.includes('베팅금액')" label="베팅금액" align="center" prop="bet" sortable>
            <template #default="{ row }">
              {{ formatNumber(row.bet) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('지급금액')" label="지급금액" align="center">
            <template #default="{ row }">
              {{ formatNumber(row.balance) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('승리금액')" label="승리금액" align="center" prop="win" sortable>
            <template #default="{ row }">
              {{ formatNumber(row.win) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('잭팟')" label="잭팟" prop="jackpot" align="center" />

          <el-table-column v-if="sp.ctc.includes('잔액')" label="잔액" align="center" prop="balance" sortable>
            <template #default="{ row }">
              {{ formatNumber(row.balance) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('게임상태')" label="게임상태" align="center">
            <template #default="{ row }">
              {{ row.status }}
            </template>
          </el-table-column>
        </el-table>

        <Pagination :pageable="page" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" />
      </MyTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { gameLogLiveApi } from '@/api/record/index';
import {
  formatNumber,
  dataTimeRangeCurTwo,
  timestampToSeoul,
  dateTransToSeoulTime
} from '@/utils/util';
import MyTable from '@/components/MyTable';
import { useMyDateRange } from '@/hooks/useMyDateRange';
import MyCombinePiker from '@/components/MyCombinePiker';

const tableColumn = ref([
  'GUID',
  'PP회원ID',
  '시작시간',
  '종료시간',
  '게임ID',
  '베팅금액',
  '지급금액',
  '승리금액',
  '잭팟',
  '잔액',
  '게임상태',
]);

const statusMap = {
  C: '완료'
};

const _dateTimeRange = dataTimeRangeCurTwo(-6);

const searchForm = reactive({
  agent_player_id: '',
  start_ts: dateTransToSeoulTime(_dateTimeRange[0]),
  end_ts: dateTransToSeoulTime(_dateTimeRange[1])
});

const timePickChangeHandle = (timestamp: number, type: string) => {
  searchForm[type] = timestamp;
};

const dataCallBack = (data: any) => {
  const _data = data.data;
  let _list = _data.games.map((item: any) => {
    item.start_date = timestampToSeoul(item.start_date, 'Y-m-d H:i:s');
    item.end_date = timestampToSeoul(item.end_date, 'Y-m-d H:i:s');

    item.status = statusMap[item.status];

    return item;
  });

  return {
    list: _list,
    total: _data.total_count
  };
};

const { tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange } =
  useTable({
    apiFn: gameLogLiveApi,
    params: searchForm,
    callback: dataCallBack
  });

const betAmountSum = ref(0);

watch(tableData, (data: any) => {
  const amount = tableData.value.reduce((prev: number, item: any) => {
    return prev + Number(item.bet);
  }, 0);
  betAmountSum.value = amount;
});
</script>

<style lang="scss" scoped>
.m-table-position {
  position: relative;
}

.m-bet-amount-sum {
  position: absolute;
  bottom: 0;
  left: 1.25rem;
  height: 56px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
}

.m-bet-amount-sum span {
  margin-right: 10px;
}
</style>
